<template>
  <!-- 个人中心 联系客服 -->
  <div id="contact">
    <div class="contact">
      <div class="top">
        <span>联系客服</span>
        <div class="tel">
          <img src="../../assets/image/7_9_1_icon_tel.png" alt />
          <span>客服电话：XXX-XXXX-XXX</span>
        </div>
        <div class="qq">
          <img src="../../assets/image/7_9_1_icon_qq.png" alt />
          <span>在线客服：XXXXXXXXXX</span>
        </div>
      </div>
      <div class="words">
        <div class="select">
          <el-select v-model="value" clearable placeholder="请选择反馈类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="ipt">
          <el-input v-model="input" placeholder="请输入您的联系方式"></el-input>
        </div>
        <div class="text">
          <el-input type="textarea" :rows="2" placeholder="请输入您的留言" v-model="textarea"></el-input>
        </div>
        <span class="btn">提交</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "产品质量"
        },
        {
          value: "选项2",
          label: "售后服务"
        },
        {
          value: "选项3",
          label: "打折优惠"
        },
    
      ],
      value: "", //选择器值
      input: "", //input值
      textarea: "" // 输入文本值
    };
  }
};
</script>

<style lang="scss" scoped>
.contact {
  width: 940px;
  height: 714px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 5px 10px 1px rgba(204, 196, 196, 0.15);
  .top {
    padding: 0 30px;
    box-sizing: border-box;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    span {
      font-size: 22px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(240, 58, 88, 1);
    }
    .tel {
      margin-left: 280px;
      display: flex;
      align-items: center;
      span {
        margin-left: 8px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(240, 58, 88, 1);
      }
    }
    .qq {
      display: flex;
      align-items: center;
      span {
        margin-left: 8px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(240, 58, 88, 1);
      }
    }
  }
  .words {
    margin-top: 30px;
    padding: 0 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .ipt {
      margin-top: 24px;
    }
    .text {
      margin-top: 24px;
    }
    .btn {
        margin-top: 36px;
      display: block;
      width: 480px;
      height: 54px;
      background: rgba(240, 58, 88, 1);
      border-radius: 6px;
      font-size: 22px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}
::v-deep .el-select:hover .el-input__inner {
}
::v-deep .el-input__inner {
  width: 830px;
  height: 60px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(230, 230, 230, 1);
  border-radius: 5px;
}
::v-deep .el-textarea__inner {
  width: 830px;
  height: 260px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(230, 230, 230, 1);
  border-radius: 5px;
}
</style>
